<!DOCTYPE html>
  <head>
   <title>网页设计与制作</title>
	<meta name="keywords" content="网页设计与制作" />
	<meta name="description" content="网页设计与制作" />
    
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1">
 	
	
    
   	<link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/jquery-ui.css" /> <!-- popular tab -->
   	<link rel="stylesheet" href="css/templatemo_misc.css">
	<link rel="stylesheet" href="css/templatemo_style.css">   
 
    
    <!-- JavaScripts -->   
    <script src="js/jquery-1.11.1.min.js"></script> <!-- lightbox -->
	<script src="js/templatemo_custom.js"></script> <!-- lightbox -->
    <script src="js/bootstrap-collapse.js"></script>
    <script src="js/jquery-ui.min.js"></script> <!-- popular tab -->
<style>
    
    #text{
      max-width: 300px;

      max-height: 300px;
      min-width: 300px;
      min-height: 250px;
    }
    
  </style>
    <!-- JavaScripts -->  
</head>
  <body>
  	<!-- menu start -->	
  	<div class="container menu">
    	<div class="row">
            <div class="col-sm-4">
            	<div class="templatemo_webtitle"><img src="images/templatemo_logo.png" alt="logo"></div>
            </div>
            <div class="col-sm-8">
            	<nav class="navbar navbar-default" role="navigation">
          <div class="container-fluid"> 
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"><span class="sr-only">目录</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div id="top-menu">
              <div class="collapse navbar-collapse main_menu" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                  <li><a href="index.html">首页</a></li>
                  <li class="current"><a href="html.html">HTML</a></li>
                  <li><a href="gallery.html">CSS</a></li>
                  <li><a href="gallery.html">案例库</a></li>
                  <li><a href="gallery.html">案例库</a></li>
                  <li><a href="contact.html">联系我们</a></li>
                </ul>
              </div>
            </div>
            <!-- /.navbar-collapse --> 
          </div>
          <!-- /.container-fluid --> 
        </nav>
            </div>
        </div>
    </div>
    <!-- gallery start -->
    	<div class="container">
			<div class="row">
        	<div class="templatemo_gallery_top">
        	<div class="col-md-8">
            	<div class="templatemo_gallery_top_left shadow">
            	<div class="templatemo_gallerytop_title">HTML网页结构</div>
                <div class="templatemo_gallerytop_stitle">基本结构</div>
                <p >
                <ol style="line-height:2px" >1、网页的所有内容都在&lt;html&gt;&lt;/html&gt;标签之内；</ol>
　　               <ol style="line-height:2px">2、&lt;head&gt;&lt;/head&gt;内放的是头部信息，是对页面的描述，不会直接显示在页面中；</ol>
　　              <ol style="line-height:2px" >3、&lt;title&gt;&lt;/title&gt;中设置的是页面的标题，&lt;title>只能放在&lt;head&gt;中；</ol>
　　               <ol style="line-height:2px" > 4、&lt;body&gt;&lt;/body&gt;是页面的主体，一个网页大部分显示的内容都定义在这里。</ol></p>
　　			<p style="text-indent:40px;">这是一个HTML页面必须有的标记，所有页面都应该至少包含这些部分。但是在实际的开发过程中，很多人都会漏掉一部分标记，由于浏览器容错性强，所以即使有的标记不包，页面含也能正常显示，但是为了更好的标准性、兼容性和可读性，最好还是将HTML标记写完全。</p>
               
                <a href="html.html"><div class="templatemo_buttongreen">暂定为返回按钮</div></a>
                <div class="clear"></div>
              </div>
            </div>
            <div class="col-md-4"><div class="templatemo_testi shadow s_margin30">
                    	<div class="maintitle">
                        	网页结构代码
                        </div>
                        <div class="para">
                        	  <textarea name="" id="text"></textarea>
  
  <br>

  <button id="btn" class="templatemo_buttongreen">代码运行</button>

<script>
  
  var oText = document.getElementById('text');

  var oBtn  = document.getElementById('btn');

  oText.value = "<html>"+"\n"+"<head>"+"\n"+"<title>hello html</title>"
  +"\n"+"</head>"+"\n"+"<h1>Hello World !</h1>"+"\n"+"</html>";

  oBtn.onclick = function(){

    var oVal  = oText.value;

    var newWindow=window.open('','');

    newWindow.document.write( oVal );

    //alert( oVal );
  }
</script>

                        	</div>
                            
                    
                            
                    </div></div>
            </div>
        </div>
        </div>
        <div class="container">
        	<div class="row margin30">
            	<div class="col-md-8">
                	<div class="templatemo_gallery_left shadow">
                		<div class="templatemo_gallerymid_title">课程内容</div>
                      <div class="templatemo_testi shadow s_margin30">
                    	<div class="maintitle">
                        	网页基本结构的说明
                        </div>
                        <div class="para">
                        	1、无论是动态还是静态页面都是以&lt;html&gt;开始，然后在网页最后以&lt;/html&gt;结尾。</div>
                            <div class="para">
                        	2、&lt;html&gt;后接着是&lt;head&gt;页头，其在&lt;head&gt;
                        	&lt;/head&gt;中的内容是在浏览器中内容无法显示的，这里是给服务器、浏览器、链接外部JS、a链接CSS样式等区域，而里面
                        	&lt;title&gt;&lt;/title&gt;中放置的是网页标题，</div>
                            <div class="para">
                            3、接着&lt;meta name="keywords" content="关键字" /&gt; &lt;meta name="description" content="本页描述或关键字描述" /&gt;”这两个标签里的内容是给搜索引擎看的说明本页关键字及本张网页的主要内容等SEO可以用到。
                        	</div>
                            <div class="para">
                            4、接着就是正文“&lt;body&gt;&lt;/body&gt; ”也就是常说的body区 ，这里放置的内容就可以通过浏览器呈现给用户，其内容可以是table表格布局格式内容，也可以DIV布局的内容，也可以直接是文字。这里也是最主要区域，网页的内容呈现区。
                        	</div>
                        	  <div class="para">
                           5、最后是以“&lt;/html&gt;”结尾，也就是网页闭合。
                        	</div>
                    </div>  
                       
                       
                        
                        
                     
                    </div>
                </div>
                <div class="col-md-4">
                	
                    <div class="templatemo_testi shadow margin30">
                    	<div class="maintitle">
                        	练习测试
                        </div>
                        <div class="para">
                        	<span class="title">完成以下选项</span>
                        	<p>这里先空着</p>

							<p>还没想好如何实现</p>
                			
                			<a href="#"><div class="templatemo_buttongreen">这个按钮需要么</div></a>
                		</div>
                
                    </div>
                </div>
            </div>
        </div>
    	<!-- gallery end -->
    
	<!-- footer start -->
    <div class="container">
    <div class="row">
        	<div class="col-md-12 margin30 center">Copyright &copy; 2017 四川广播电视大学 | 信息中心 媒体制作部  - 四川  | 成都 </div>
            <div class="margin30">&nbsp;</div>
        </div>
    </div>
    <!-- footer end -->
  </body>
</html>